<template>

      <el-col :span="24" class="colmargin">
       
        <el-radio-group v-model="indextab" @change="getExecutionList" style="margin-bottom: 10px;">
    <el-radio-button size="small" label="1">费用汇总</el-radio-button>
    <!-- <el-radio-button size="small" label="2">退费记录</el-radio-button> -->
    <el-radio-button size="small" label="3">押金清单</el-radio-button>
 
  </el-radio-group>

         <el-col :span="24" v-if="indextab=='1'">
          <el-table
      :data="currentPageData"
      style="width: 100%"
   
      >
     
      <el-table-column
        prop="created_at"
        label="日期"
       >
      </el-table-column>
      <el-table-column
        prop="name"
        label="项目类型"
       >
      </el-table-column>
      <el-table-column
        prop="cate_name"
        label="费用种类">
      </el-table-column>
        <el-table-column
        prop="money"
        label="合计"
       >
      </el-table-column>
      <el-table-column
        prop="receipts"
        label="应收">
      </el-table-column>
        <!-- <el-table-column
        prop="discount"
        label="折扣"
       > -->
      <!-- </el-table-column> -->
      <el-table-column
        prop="number"
        label="数量">
      </el-table-column>
              <!-- <el-table-column
        prop="usage"
        label="用法"
       >
      </el-table-column> -->
      <!-- <el-table-column
        prop="specification"
        label="规格">
      </el-table-column> -->
    </el-table>
      
     <el-pagination
  background
  small
  layout="prev, pager, next"
  :current-page='currentPage'
  :page-size='pageSize'
  :total="totalPage"
  @prev-click='prevPage'
    @next-click='nextPage'
    @current-change='sizeChange'
     v-if="currentPageData.length!=0"
     style="margin-top:20px"
  >
</el-pagination>
      </el-col>
         <el-col :span="6" style="margin-top:40px" v-else-if="indextab!='3'&&currentPageData.length!=0" >
      
       <el-input placeholder="请输入内容" disabled v-model="money">
    <template slot="prepend"> 总价：</template>
  </el-input>
         </el-col>
        <el-col :span="24" v-else>
                <el-table
      :data="currentPageData"
      style="width: 100%">
      <el-table-column
        prop="created_at"
        label="日期"
       >
      </el-table-column>
      <el-table-column
        prop="action_type"
        label="费用类型"
       >
        <!-- <template slot-scope="scope">
    
         {{scope.row.action_type==1?'充值':scope.row.action_type==4?'退款':'住院结算'}}
      </template> -->
        
      </el-table-column>
      <el-table-column
        prop="fee"
        label="费用">
      </el-table-column>
      
    </el-table>
      
     <el-pagination
  background
  small
  layout="prev, pager, next"
  :current-page='currentPage'
  :page-size='pageSize'
  :total="totalPage"
  @prev-click='prevPage'
    @next-click='nextPage'
     v-if="currentPageData.length!=0"
  >
</el-pagination>
           </el-col>

<el-dialog :close-on-click-modal='false'
  title="提示"
  :visible.sync="centerDialogVisible"
  width="70%"
  center
  class="see_box"
  >

  <span slot="footer" class="dialog-footer">
  
    <el-button type="success" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

      </el-col>

</template>

<script>
import {
  costRecord,
  deposiLog,

} from "@/api/zhuyanre";

export default {
  // name:"costsRecord",
    props: ["id"],
  data(){
    return {
      tableData:[
     
      ],
      indextab:'1',
      money:'',
      centerDialogVisible:false,
      item:{},
 //所有数据
              totalPage: 1, // 统共页数，默认为1
             currentPage: 1, //当前页数 ，默认为1
            pageSize: 4, // 每页显示数量
            currentPageData: [], //当前页显示内容
    cuntent:[]
    }
    
  },
   mounted(){
       
      this.getExecutionList()
    
   },
   methods:{
     //查看  详情
     seedelit(item){
      
       this.item=item
       this.centerDialogVisible=true
     },
       sizeChange(val){
        
          this.currentPage=val
           this.setCurrentPageData();
        },
        getExecutionList() {
     let d = {
        hospital_id:this.id,
        order_type:this.indextab
      };
      if(this.indextab=='3'){
              deposiLog({hospital_id:this.id}).then((res) => {
         if(res.code==200){
           this.tableData=res.data.data
           this.money=res.data.money
           this.item=this.tableData[0]
           this.totalPage=res.data.data.length 
           this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
           let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.tableData.slice(
                begin,
                end
                );
         }
         this.currentPageData.forEach(res=>{
           res.action_type=res.action_type==1?'充值':res.action_type==4?'退款':'住院结算'
         })
      });
      }else{
              costRecord(d).then((res) => {
         if(res.code==200){
           this.tableData=res.data.lists
           this.money=res.data.money
           this.item=this.tableData[0]
           this.totalPage=res.data.lists.length 
           this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
           let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.tableData.slice(
                begin,
                end
                );
         }
      });
      }
   
    },
        setCurrentPageData() {
                  let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.tableData.slice(
                begin,
                end
                );
        },
//上一页
prevPage() {
        console.log(this.currentPage);
        if (this.currentPage == 1) return;

        this.currentPage--;
        this.setCurrentPageData();

},
// 下一页
nextPage() {
        if (this.currentPage == this.totalPage)return ;

        this.currentPage++;
        this.setCurrentPageData();

        },
       
        hospicostR(){
          console.log(this.cuntent)
          var arr=[]
          this.cuntent.forEach(res=>{
            arr.push(res.id)
          })
          this.$emit("hospicostR", arr);
        }
 }

 
 
}
</script>

<style scoped>
.colmargin{
  overflow: auto ;
    padding: 0 10px;
} 
.see_box .el-col{
  margin:5px 0px;
  font-size: 20px;
}
.see_box .span{
  color: dimgray;
  font-size: 18px;
  text-indent:2em;
}
 .span{
  color: dimgray;
  font-size: 13px;
  text-indent:2em;
}
.colmargin .el-col{
  margin:2px 0px;
}
</style>